<template>
  <section class="jumbotron">
    <h3 class="jumbotron-heading">Search Github Users</h3>
    <input
      type="text"
      placeholder="enter the name you search"
      v-model="keyWords"
    />&nbsp;
    <button @click="searchUsers">Search</button>
  </section>
</template>

<script>
import axios from "axios";
// import this.$bus from "../this.$bus";
export default {
  name: "mySearch",
  data() {
    return {
      keyWords: "", // 用户输入的关键字
    };
  },
  methods: {
    // 查询用户
    searchUsers() {
      // 请求前更新 List 的数据
      this.$bus.$emit("updateListData", {
        isFirst: false, // 隐藏欢迎词
        isLoading: true, // 展示加载中...
        errMsg: "", // 错误信息为空
        users: [], // 数据置为空
      });
      axios.get(`https://api.github.com/search/users?q=${this.keyWords}`).then(
        // 成功的回调，隐藏欢迎和加载中，展示请求出来的数据
        (reponse) => {
          console.log("请求成功了", reponse.data.items);

          this.$bus.$emit("updateListData", {
            isLoading: false, // 请求成功，隐藏加载中...
            errMsg: "",
            users: reponse.data.items, // users 数组存放请求成功的数据
          });
        },

        (error) => {
          //请求失败后更新List数据
          console.log("请求失败了", error.message);
          this.$bus.$emit("updateListData", {
            isLoading: false, // 请求成功，隐藏加载中...
            errMsg: error.message, // 请求出错，展示错误信息
            users: [], // users 数组置空
          });
        }
      );
    },
  },
};
</script>

<style>
.jumbotron {
  margin-top: 20px;
}
.jumbotron-heading {
  color: skyblue;
}
</style>
